<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<template id="foo">
    <p>你好</p>
</template>-->

<div id="foo">
    
</div>
<script>
    
    /*
        1. 使用如下方式创建节点
         // let fragment = document.createDocumentFragment();
         // 和下面一样的效果
         const fragment = new DocumentFragment();
    /*
        如果连续调用 document.appendChild()，则不仅费事，还会导致多 次布局重排。
        而使用 DocumentFragment 可以一次性添加所有子节点，最多只会有一次布局重排
     */


    // let fragment = document.createDocumentFragment();
    // 和下面一样的效果
    const fragment = new DocumentFragment();
    const foo = document.querySelector('#foo')
    
    // 为DocumentFragment添加子元素不会导致布局重排
    fragment.appendChild(document.createElement('p'))
    fragment.appendChild(document.createElement('p'))
    fragment.appendChild(document.createElement('p'))
    foo.appendChild(fragment)
    
    
    
    /*
        2.使用<template>标签
     */
    
    

</script>
</body>
</html>